<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Study Review</text>
      <view class="filter-section">
        <u-button-group>
          <u-button 
            :type="filter === 'all' ? 'primary' : 'info'"
            :plain="filter !== 'all'"
            @click="filter = 'all'"
          >All</u-button>
          <u-button 
            :type="filter === 'pending' ? 'primary' : 'info'"
            :plain="filter !== 'pending'"
            @click="filter = 'pending'"
          >Pending</u-button>
          <u-button 
            :type="filter === 'completed' ? 'primary' : 'info'"
            :plain="filter !== 'completed'"
            @click="filter = 'completed'"
          >Completed</u-button>
        </u-button-group>
      </view>
    </view>

    <!-- Review Content -->
    <scroll-view scroll-y class="content">
      <view class="review-list">
        <view v-for="item in filteredReviews" :key="item.id" class="review-card">
          <view class="review-header">
            <text class="subject-name">{{ item.subject }}</text>
            <text :class="['status', item.status]">{{ item.status }}</text>
          </view>
          <text class="topic">{{ item.topic }}</text>
          <view class="details">
            <text class="detail-text">Due: {{ item.dueDate }}</text>
            <text class="detail-text">Priority: {{ item.priority }}</text>
          </view>
          <view class="progress-section">
            <view class="progress-bar">
              <view 
                class="progress-fill"
                :style="{ width: item.progress + '%' }"
              ></view>
            </view>
            <text class="progress-text">{{ item.progress }}%</text>
          </view>
          <view class="actions">
            <u-button type="primary" size="mini" @click="startReview(item)">Start Review</u-button>
            <u-button type="info" size="mini" @click="viewDetails(item)">Details</u-button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filter: 'all',
      reviews: [
        {
          id: 1,
          subject: 'Mathematics',
          topic: 'Calculus Integration',
          status: 'pending',
          dueDate: '2024-03-20',
          priority: 'High',
          progress: 0
        },
        {
          id: 2,
          subject: 'Physics',
          topic: 'Quantum Mechanics',
          status: 'in-progress',
          dueDate: '2024-03-22',
          priority: 'Medium',
          progress: 45
        },
        {
          id: 3,
          subject: 'Chemistry',
          topic: 'Organic Compounds',
          status: 'completed',
          dueDate: '2024-03-18',
          priority: 'Low',
          progress: 100
        }
      ]
    }
  },
  computed: {
    filteredReviews() {
      if (this.filter === 'all') return this.reviews
      return this.reviews.filter(review => review.status === this.filter)
    }
  },
  methods: {
    startReview(item) {
      // Implement review start logic
      uni.showToast({
        title: `Starting review for ${item.topic}`,
        icon: 'none'
      })
    },
    viewDetails(item) {
      // Implement details view logic
      uni.showToast({
        title: `Viewing details for ${item.topic}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.filter-section {
  margin: 20rpx 0;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.review-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.subject-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.status {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.status.pending {
  background-color: #ffeaa7;
  color: #fdcb6e;
}

.status.completed {
  background-color: #55efc4;
  color: #00b894;
}

.status.in-progress {
  background-color: #74b9ff;
  color: #0984e3;
}

.topic {
  font-size: 28rpx;
  color: #666;
  margin: 10rpx 0;
}

.details {
  display: flex;
  gap: 20rpx;
  margin: 10rpx 0;
}

.detail-text {
  font-size: 24rpx;
  color: #888;
}

.progress-section {
  margin: 15rpx 0;
}

.progress-bar {
  height: 10rpx;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #4b7bec;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 5rpx;
}

.actions {
  display: flex;
  gap: 20rpx;
  margin-top: 15rpx;
}
</style> 